/**
 * v-auth 按钮权限指令
 *
 * 这是一个自定义指令，用于根据用户权限控制按钮的显示与隐藏。
 * 指令接受一个参数，可以是一个字符串表示单一权限，或者是一个包含多个权限的数组。
 * 在组件的模板中使用 v-auth 指令，根据当前用户的权限判断是否显示按钮。
 *
 * @example
 * // 单一权限的使用方式
 * <button v-auth="'admin'">Admin Button</button>
 *
 * // 多个权限的使用方式
 * <button v-auth="['admin', 'user']">Admin and User Button</button>
 *
 * @param {Array|string} value - 权限值，可以是一个字符串或包含多个字符串的数组。
 * @directive
 * @mounted
 * @memberof module:directives
 */
import { useAuthStore } from "@/stores/modules/auth";
import type { Directive, DirectiveBinding } from "vue";

const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding;
    const authStore = useAuthStore();
    const currentPageRoles = authStore.authButtonListGet[authStore.routeName] ?? [];
    if (value instanceof Array && value.length) {
      const hasPermission = value.every(item => currentPageRoles.includes(item));
      if (!hasPermission) el.remove();
    } else {
      if (!currentPageRoles.includes(value)) el.remove();
    }
  }
};

export default auth;
